<template>
  <!-- 排房terraces -->
  <view class="terraces-com" v-if="data.show">
    <view class="terraces">
      <view class="header">
        <u-button
          type="default"
          style="width: 200rpx; margin: 0"
          size="small"
          :plain="true"
          :hairline="true"
          text="取消"
          @click="Noclick"
        ></u-button>
        <view class="name">
          {{ data.name }}
        </view>
        <u-button
          type="primary"
          style="width: 200rpx; margin: 0"
          size="small"
          :plain="true"
          :hairline="true"
          text="确定"
          @click="Okclick"
        ></u-button>
      </view>
      <view class="RoomClassName">
        {{ data.RoomClassName }}
      </view>
      <view class="roomList">
        <view
          class="li-box"
          v-for="(item, index) in data.roomList"
          :key="index"
          @click="liclick(item)"
        >
          <view
            :class="
              data.AssignRooms.some((s) => s === item.RoomNo) ? 'licolor' : ''
            "
          >
            {{ item.RoomNo }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { toRefs, defineProps } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  dataclick: {
    type: Function,
    default: () => null
  }
})
let { data } = toRefs(props)
const Noclick = () => {
  data.value.show = false
  props.dataclick(data.value)
}
const liclick = (e) => {
  if (data.value.AssignRooms.indexOf(e.RoomNo) > -1) {
    data.value.AssignRooms.splice(data.value.AssignRooms.indexOf(e.RoomNo), 1)
  } else if (data.value.AssignRooms.length < data.value.Num) {
    console.log(data.value.Num)
    data.value.AssignRooms.push(e.RoomNo)
  }
}
const Okclick = () => {
  data.value.show = false
  props.dataclick(data.value)
}
onLoad(() => {
  console.log(data)
})
</script>

<style lang="scss" scoped>
.terraces-com {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: #0000007a;
  z-index: 1009;

  .terraces {
    position: absolute;
    bottom: 0;
    height: calc(70vh);
    width: calc(100% - 104rpx);
    background-color: #fff;
    padding: 42rpx 52rpx;
    border-radius: 30rpx 30rpx 0 0;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .RoomClassName {
      font-size: 30rpx;
      font-weight: 400;
      color: #84878c;
      margin: 40rpx 0;
    }
    .roomList {
      display: flex;
      flex-wrap: wrap;
      .li-box {
        width: calc((100% - 55rpx) / 3);
        border: 1px solid #e0e3e9;
        border-radius: 10rpx;
        text-align: center;
        height: 40px;
        line-height: 40px;
        margin: 0 20rpx 20rpx 0;
        .licolor {
          border-radius: 10rpx;
          background-color: #409eff;
          color: #fff;
        }
      }
      .li-box:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>
